<template>
  <a-modal
    v-if="open"
    title="选择部门"
    centered
    :closable="false"
    :ok-text="'确定'"
    :open="true"
    :width="800"
    :mask-closable="false"
    @cancel="onCancel"
    @ok="onOk"
  >
    <div class="select-range-container">
      <div class="select-range-modal">
        <SelectDepsSub
          :defaultkeys="selectKeys"
          :open="refresh"
          @selected="handleSelected"
        />
      </div>
      <div class="user-content">
        <div class="title">
          <div class="tit">已选择：</div>
          <div class="link" @click="clearAll">清空</div>
        </div>
        <div
          v-for="(item, index) in selectVideos"
          :key="'dep' + index"
          class="user-item"
        >
          <div class="user-name">
            {{ getItemName(item) }}
          </div>
          <CloseOutlined
            class="close-icon"
            @click="removeItem(index)"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import SelectDepsSub from './select-deps-sub.vue'

interface Props {
  defaultDepIds: any[]
  defaultDeps: any[]
  open: boolean
  onSelected: (selDepIds: any[], selDeps: any[]) => void
  onCancel: () => void
}

interface SelVideosModel {
  name: string
  id: number
  title?: any
}

const props = defineProps<Props>()

const refresh = ref(true)
const selectKeys = ref<number[]>([])
const selectVideos = ref<SelVideosModel[]>([])

// 监听props.open变化
watch(() => props.open, (newVal) => {
  if (newVal) {
    refresh.value = !refresh.value
  }
})

// 监听默认值变化
watch([() => props.defaultDepIds, () => props.defaultDeps, refresh], () => {
  selectKeys.value = [...props.defaultDepIds]
  selectVideos.value = [...props.defaultDeps]
}, { immediate: true })

// 处理选择事件
const handleSelected = (arr: any[], videos: any[]) => {
  if (arr && videos) {
    selectKeys.value = arr
    selectVideos.value = videos
  }
}

// 获取项目名称
const getItemName = (item: any) => {
  // 根据实际数据结构调整
  if (item.title && item.title.props && item.title.props.children) {
    return item.title.props.children
  }
  return item.name || item.title || '未知部门'
}

// 移除单个项目
const removeItem = (index: number) => {
  const arr = [...selectKeys.value]
  const arr2 = [...selectVideos.value]
  arr.splice(index, 1)
  arr2.splice(index, 1)
  selectKeys.value = arr
  selectVideos.value = arr2
}

// 清空所有选择
const clearAll = () => {
  selectKeys.value = []
  selectVideos.value = []
}

// 确定按钮事件
const onOk = () => {
  if (selectKeys.value.length === 0) {
    message.error('请选择至少一个部门对象')
    return
  }
  props.onSelected(selectKeys.value, selectVideos.value)
}

// 取消按钮事件
const onCancel = () => {
  props.onCancel()
}
</script>

<style scoped>
.select-range-container {
  width: 100%;
  display: flex;
}

.select-range-modal {
  width: 528px;
}

.user-content {
  margin-left: 24px;
  margin-bottom: 12px;
  width: 200px;
  height: 514px;
  background: #fafafa;
  border-radius: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0px 16px;
}

.user-content .title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.user-content .title .tit {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.88);
  line-height: 40px;
}

.user-content .title .link {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.user-content .title .link:hover {
  opacity: 0.8;
}

.user-content .user-item {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.user-content .user-item .user-name {
  width: 140px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-icon {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
</style>